<template>
  <section class="recommend">
    <header class="header">
      <h3 class="title">推荐资讯</h3>
    </header>

    <div>
      <ul>
        <li class="pic-text item" v-for="item in data" :key="item.articleContentId">
          <div class="img-box">
            <nuxt-link :to="{'path': `/news/${item.articleContentId}`}" :title="item.name" target="_blank">
              <img v-lazyload.cdn="item.picture" :alt="item.name" />
            </nuxt-link>
          </div>

          <div class="text-content">
            <p>
              <nuxt-link target="_blank"
                         :title="item.name"
                         :to="{'path': `/news/${item.articleContentId}`}">{{ item.name | cutStr(80) }}
              </nuxt-link>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>

  export default {
    components: {},
    props: {
      border: {
        type: Boolean,
        'default': false
      },

      data: {
        type: Array,
        'default' () {
          return []
        }
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../../element-variables";

  .recommend {
    padding: 10px 20px 5px;
    background-color: #fff;
    border: 1px solid #dedede;

    .header {
      height: 42px;
      border-bottom: 2px solid #dedede;
    }

    .item {
      padding: 15px 0;

      & + .item {
        border-top: 1px dashed #dedede;
      }
    }

    .text-content {
      color: #6e6e6e;
      line-height: 20px;
      padding: 6px 0;
      word-break: break-all;

      &:hover{
        color: $--color-primary;
      }
    }

    .img-box {
      width: 96px;
      height: 64px;
      /*background-color: red;*/
      text-align: center;

      a {
        display: block;
        height: 100%;

        &:after {
          display: inline-block;
          vertical-align: middle;
          content: "";
          height: 100%;
        }
      }

      img {
        width: 96px;
        height: 64px;
        vertical-align: middle;
      }
    }

    .title {
      font-size: 16px;
      color: $--color-primary;
      font-weight: normal;
      position: relative;
      float: left;
      height: 100%;
      line-height: 40px;

      &:after {
        height: 2px;
        content: ' ';
        width: 100%;
        position: absolute;
        left: 0;
        bottom: -2px;
        background-color: $--color-primary;
      }
    }
  }
</style>
